<div *ngIf="nzTitle"
     class="ant-descriptions-title">
  <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
</div>
<div class="ant-descriptions-view">
  <table>
    <tbody>
      <ng-container *ngIf="nzLayout === 'horizontal'">
        <tr class="ant-descriptions-row"
            *ngFor="let row of itemMatrix; let i = index">
          <ng-container *ngFor="let item of row; let isLast = last">
            <!-- Horizontal & NOT Bordered -->
            <ng-container *ngIf="!nzBordered">
              <td class="ant-descriptions-item"
                  [colSpan]="item.span">
                <span class="ant-descriptions-item-label"
                      [class.ant-descriptions-item-colon]="nzColon">{{ item.title }}</span>
                <span class="ant-descriptions-item-content">
                  <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                </span>
              </td>
            </ng-container>
            <!-- Horizontal & Bordered -->
            <ng-container *ngIf="nzBordered">
              <td class="ant-descriptions-item-label"
                  *nzStringTemplateOutlet="item.title">{{ item.title }}</td>
              <td class="ant-descriptions-item-content"
                  [colSpan]="item.span * 2 - 1">
                <ng-template [ngTemplateOutlet]="item.content"></ng-template>
              </td>
            </ng-container>
          </ng-container>
        </tr>
      </ng-container>

      <ng-container *ngIf="nzLayout === 'vertical'">
        <!-- Vertical & NOT Bordered -->
        <ng-container *ngIf="!nzBordered">
          <ng-container *ngFor="let row of itemMatrix; let i = index">
            <tr class="ant-descriptions-row">
              <ng-container *ngFor="let item of row; let isLast = last">
                <td class="ant-descriptions-item"
                    [colSpan]="item.span">
                  <span class="ant-descriptions-item-label"
                        [class.ant-descriptions-item-colon]="nzColon">{{ item.title }}</span>
                </td>
              </ng-container>
            </tr>
            <tr class="ant-descriptions-row">
              <ng-container *ngFor="let item of row; let isLast = last">
                <td class="ant-descriptions-item"
                    [colSpan]="item.span">
                  <span class="ant-descriptions-item-content">
                    <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                  </span>
                </td>
              </ng-container>
            </tr>
          </ng-container>
        </ng-container>
        <!-- Vertical & Bordered -->
        <ng-container *ngIf="nzBordered">
          <ng-container *ngFor="let row of itemMatrix; let i = index">
            <tr class="ant-descriptions-row">
              <ng-container *ngFor="let item of row; let isLast = last">
                <td class="ant-descriptions-item-label"
                    [colSpan]="item.span">
                  {{ item.title }}
                </td>
              </ng-container>
            </tr>
            <tr class="ant-descriptions-row">
              <ng-container *ngFor="let item of row; let isLast = last">
                <td class="ant-descriptions-item-content"
                    [colSpan]="item.span">
                  <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                </td>
              </ng-container>
            </tr>
          </ng-container>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
</div>
